<template>
	<!--产业竞争优势分析-->
	<div class="competitive-edge">
		<div class="tablist">
			<div class="items" v-for="(item,index) in tabList" :key="index" @click="tabClick(item,index)">
				<img :class="{imgActive:tabIndex==index}" :src="tabIndex==index?item.imgActive:item.img" alt="">
				<span :class="{active:tabIndex==index}">{{ item.title }}</span>
			</div>
		</div>
		<el-row>
			<el-col span="7">
				<div class="bar1Box">
					<chart-block chartID="chart1" :title="optionData.title" :optionData="optionData" chartType="getStackBar" height="38vh" style="padding:0 1vh 3vh 0"></chart-block>
					<chart-block chartID="chart4" :title="AreaLineOptionData.title" :optionData="AreaLineOptionData" chartType="getAreaLine" height="38vh" style="padding:0 1vh 3vh 0;margin-top:3vh"></chart-block>
				</div>
			</el-col>
			<el-col span="10">
				<div class="centerBox">
					<div class="topBox">
						<div class="titleBox">
              <div class="titleLeft"></div>
              <div class="titleRight"></div>
              <div class="titleCenter">产业竞争优势对标</div>
						</div>
						<chart-block chartID="chart5" :title="MarkChartOptionData.title" :optionData="MarkChartOptionData" chartType="getMarkChart" height="42vh" style="margin-top:0vh;background:rgba(12,51,127,0);border:none;box-shadow: none;padding-top:1vh" :isTitle="false"></chart-block>
					</div>
					<div class="bottomBox">
						<li v-for="(item,index) in ysData" :key="index">
							<div :style="{background:'url('+item.icon+') top center no-repeat','background-size':'auto 100%'}">{{ item.title }}</div>
							<p>{{ item.name }}</p>
						</li>
					</div>
				</div>
			</el-col>
			<el-col span="7">
				<chart-block chartID="chart3" :title="optionData1.title" :optionData="optionData1" chartType="getStackBar" height="38vh" style="padding:0 1vh 1vh 0" titleType="moreBlueBig"></chart-block>
				<chart-block chartID="chart6" :title="AreaLineOptionData1.title" :optionData="AreaLineOptionData1" chartType="getAreaLine" height="38vh" style="padding:0 1vh 1vh 0;margin-top:3vh" titleType="moreBlueBig"></chart-block>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import {getCompeteData, getCompeteData1, getCompeteData2, getCompeteData3, getCompeteData4} from '@/api/pages.js'

export default {
	name: "competitive-edge",
	components: {
		NormalBlock: () => import('@/components/normal-block'),
		ChartBlock: () => import('@/components/chart-block'),
	},
	props: {},
	data() {
		return {
			tabIndex: 0,
			optionData: {
			    max:100,
				rotate:45,
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			optionData1: {
			    max:100,
				rotate:45,
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			AreaLineOptionData: {
				rotate:45,
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [
					{
						lineColor: '#BA6D00',//折线颜色
						pointColor: '#FFA82C',//拐点颜色
						borderColor: '#FFA82C',//拐点边框颜色
						topColor: 'rgba(186, 109, 0, 1)',//区域上渐变颜色
						bottomColor: 'rgba(186, 109, 0, .5)',//区域下渐变颜色
					},
					{
						lineColor: '#00D975',//折线颜色
						pointColor: '#00D975',//拐点颜色
						borderColor: '#00D975',//拐点边框颜色
						topColor: 'rgba(0, 217, 117, 1)',//区域上渐变颜色
						bottomColor: 'rgba(0, 217, 117, .5)',//区域下渐变颜色
					},
					{
						lineColor: '#00D8FF',//折线颜色
						pointColor: '#00D8FF',//拐点颜色
						borderColor: '#00D8FF',//拐点边框颜色
						topColor: 'rgba(0, 216, 255, 1)',//区域上渐变颜色
						bottomColor: 'rgba(0, 216, 255, .5)',//区域下渐变颜色
					},
				],
			},
			MarkChartOptionData: {
				names: []
			},
			AreaLineOptionData1: {
				rotate:45,
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [
					{
						lineColor: '#BA6D00',//折线颜色
						pointColor: '#FFA82C',//拐点颜色
						borderColor: '#FFA82C',//拐点边框颜色
						topColor: 'rgba(186, 109, 0, 1)',//区域上渐变颜色
						bottomColor: 'rgba(186, 109, 0, .5)',//区域下渐变颜色
					},
					{
						lineColor: '#00D975',//折线颜色
						pointColor: '#00D975',//拐点颜色
						borderColor: '#00D975',//拐点边框颜色
						topColor: 'rgba(0, 217, 117, 1)',//区域上渐变颜色
						bottomColor: 'rgba(0, 217, 117, .5)',//区域下渐变颜色
					},
					{
						lineColor: '#00D8FF',//折线颜色
						pointColor: '#00D8FF',//拐点颜色
						borderColor: '#00D8FF',//拐点边框颜色
						topColor: 'rgba(0, 216, 255, 1)',//区域上渐变颜色
						bottomColor: 'rgba(0, 216, 255, .5)',//区域下渐变颜色
					},
				],
			},
			ysData: [
				{
					icon: require('../../assets/images/Aqu.png'),
					name: 'X、X、X城市有较强的竞争力优势但是结构优势较差，应当给予政策倾斜大力发展，进一步加快三次产业及其内部结构优化升级，使产业迈向中高端水平。',
					title: 'A区'
				},
				{
					icon: require('../../assets/images/Bqu.png'),
					name: 'X、X、X城市经济健康向上发展。有较强的竞争力优势并且结构优势较强，应该持续巩固和发展经济健康向上的好势头，全力培育、壮大优势产业链，推动形成规模化产业集群，打造现代产业体系。',
					title: 'B区'
				},
				{
					icon: require('../../assets/images/Cqu.png'),
					name: 'X、X、X城市结构优势较强但是无竞争力优势，建议全面提升产业的开放水平和信息化水平，增强现有产业的支撑作用和创新优势，强化产业基础，以此提升城市竞争力。',
					title: 'C区'
				},
				{
					icon: require('../../assets/images/Dqu.png'),
					name: 'X、X、X城市经济发展质量较差，无竞争力优势并且结构优势较差，需要从优化产业结构和提升城市竞争力两方面增强区域经济发展质量，确保经济可持续稳定发展。',
					title: 'D区'
				}
			],
			tabList: [
				// {
				// 	img: require('../../assets/images/qytab1.png'),
				// 	imgActive: require('../../assets/images/qytab1-active.png'),
				// 	title: '兵团对标',
				// 	id: '1',
				// 	name: '兵团'
				// },
								{
					img: require('../../assets/images/qytab3.png'),
					imgActive: require('../../assets/images/qytab3-active.png'),
					title: '全国对标',
					id: '3',
					name: '全国'
				},
        {
          img: require('../../assets/images/qytab2.png'),
          imgActive: require('../../assets/images/qytab2-active.png'),
          title: '区县对标',
          id: '2',
          name: '重庆市'
        }
			],
			tabName: '全国',
			tabid: '3'
		}
	},
	computed: {},
	created() {
		this.initData()
		this.$store.commit("SET_BREAD2", '全国对标');
	},
	mounted() {
		this.getCompeteData('E100', this.tabName)
		this.getCompeteData1('E101', this.tabName)
		this.getCompeteData2('E102', this.tabid)
		this.getCompeteData3('E103', this.tabid)
		this.getCompeteData4('E114', this.tabid)
		this.getCompeteData5('C068', this.tabid)
		this.getCompeteData6('C069', this.tabid)
		this.getCompeteData7('C070', this.tabid)
		this.getCompeteData8('C071', this.tabid)
	},
	methods: {
		tabClick(item, index) {
			switch (item.title) {
				case '区县对标': {
					this.$store.commit("SET_BREAD2", '区县对标');
					break;
				}
				case '全国对标': {
					this.$store.commit("SET_BREAD2", '全国对标');
					break;
				}

			}
			this.tabIndex = index
			this.getCompeteData('E100', item.name)
			this.getCompeteData1('E101', item.name)
			this.getCompeteData2('E102', item.id)
			this.getCompeteData3('E103', item.id)
			this.getCompeteData4('E114', item.id)
			this.getCompeteData5('C068', item.id)
			this.getCompeteData6('C069', item.id)
			this.getCompeteData7('C070', item.id)
			this.getCompeteData8('C071', item.id)
		},
		initData() {

		},
		// 三次产业结构变化
		getCompeteData(busiCode, areaName) {
			getCompeteData(busiCode, areaName).then(res => {
				if (res.data.code == 200) {
                      this.optionData.title= res.data.data.title,
                      this.optionData.categoryAxis=res.data.data.categoryAxis,
                      this.optionData.seriesData= res.data.data.seriesData,
                      this.optionData.color=["rgba(253, 210, 48, 1)", "rgba(31, 255, 158, 1)", "rgba(0, 189, 251, 1)"]
					// this.optionData = {
					// 	title: res.data.data.title,
					// 	categoryAxis: res.data.data.categoryAxis, //类目轴数据
					// 	seriesData: res.data.data.seriesData,
					// 	color: ["#03cefa", "#fd664d", "#f1db25"],
					// }
				}
			}).catch(err => {

			})
		},
		// 三次产业增加值变化
		getCompeteData1(busiCode, areaName) {
			getCompeteData1(busiCode, areaName).then(res => {
				if (res.data.code == 200) {
					this.AreaLineOptionData = {
						rotate:45,
						title: res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
						smooth: true,//折线是否圆滑
						LinearGradientColor: [
							{
								lineColor: '#BA6D00',//折线颜色
								pointColor: '#FFA82C',//拐点颜色
								borderColor: '#FFA82C',//拐点边框颜色
								topColor: 'rgba(186, 109, 0, 1)',//区域上渐变颜色
								bottomColor: 'rgba(186, 109, 0, .5)',//区域下渐变颜色
							},
							{
								lineColor: '#00D975',//折线颜色
								pointColor: '#00D975',//拐点颜色
								borderColor: '#00D975',//拐点边框颜色
								topColor: 'rgba(0, 217, 117, 1)',//区域上渐变颜色
								bottomColor: 'rgba(0, 217, 117, .5)',//区域下渐变颜色
							},
							{
								lineColor: '#00D8FF',//折线颜色
								pointColor: '#00D8FF',//拐点颜色
								borderColor: '#00D8FF',//拐点边框颜色
								topColor: 'rgba(0, 216, 255, 1)',//区域上渐变颜色
								bottomColor: 'rgba(0, 216, 255, .5)',//区域下渐变颜色
							},
						],
					}
				}
			}).catch(err => {

			})
		},
		// 三次产业结构变化对比
		getCompeteData2(busiCode, dataType) {
			getCompeteData2(busiCode, dataType).then(res => {
                let dataZoom=[];
                if(res.data.data.categoryAxis.length>18){
                    dataZoom=[
                            {
                                type: 'slider',
                                show: true,
                                xAxisIndex: [0],
                                start: 1,
                                end: 35
                            },
                            {
                                type: 'inside',
                                xAxisIndex: [0],
                                start: 1,
                                end: 35
                            },
                        ]
                };
				if (res.data.code == 200) {
                      this.optionData1.LinearGradientDataZoom=dataZoom,
                      this.optionData1.LinearGradientbottom='10%',
                      this.optionData1.title= res.data.data.title,
                      this.optionData1.categoryAxis=res.data.data.categoryAxis,
                      this.optionData1.seriesData= res.data.data.seriesData,
                      this.optionData1.color=["rgba(253, 210, 48, 1)", "rgba(31, 255, 158, 1)", "rgba(0, 189, 251, 1)"],
                      this.optionData1.rotate=60
					// this.optionData1 = {
					// 	title: res.data.data.title,
					// 	categoryAxis: res.data.data.categoryAxis, //类目轴数据
					// 	seriesData: res.data.data.seriesData,
					// 	color: ["#03cefa", "#fd664d", "#f1db25"],
					// 	rotate: 60,
					// }
				}
			}).catch(err => {

			})
		},
		// 三次产业结构变化对比
		getCompeteData3(busiCode, dataType) {
			getCompeteData3(busiCode, dataType).then(res => {
                console.log(res)
                let dataZoom=[];
                if(res.data.data.categoryAxis.length>18){
                    dataZoom=[
                            {
                                type: 'slider',
                                show: true,
                                xAxisIndex: [0],
                                start: 1,
                                end: 35
                            },
                            {
                                type: 'inside',
                                xAxisIndex: [0],
                                start: 1,
                                end: 35
                            },
                        ]
                };
				if (res.data.code == 200) {
					this.AreaLineOptionData1 = {
                        LinearGradientDataZoom:dataZoom,
                        LinearGradientbottom:'10%',
						title: res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
						smooth: true,//折线是否圆滑
						rotate: 60,//X轴倾斜角度
						LinearGradientColor: [
							{
								lineColor: '#BA6D00',//折线颜色
								pointColor: '#FFA82C',//拐点颜色
								borderColor: '#FFA82C',//拐点边框颜色
								topColor: 'rgba(186, 109, 0, 1)',//区域上渐变颜色
								bottomColor: 'rgba(186, 109, 0, .5)',//区域下渐变颜色
							},
							{
								lineColor: '#00D975',//折线颜色
								pointColor: '#00D975',//拐点颜色
								borderColor: '#00D975',//拐点边框颜色
								topColor: 'rgba(0, 217, 117, 1)',//区域上渐变颜色
								bottomColor: 'rgba(0, 217, 117, .5)',//区域下渐变颜色
							},
							{
								lineColor: '#00D8FF',//折线颜色
								pointColor: '#00D8FF',//拐点颜色
								borderColor: '#00D8FF',//拐点边框颜色
								topColor: 'rgba(0, 216, 255, 1)',//区域上渐变颜色
								bottomColor: 'rgba(0, 216, 255, .5)',//区域下渐变颜色
							},
						],
					}
				}
			}).catch(err => {

			})
		},
		//四象限
		getCompeteData4(busiCode, dataType) {
			getCompeteData4(busiCode, dataType).then(res => {
				if (res.data.code === 200) {
					let allDataX = []//x轴数据
					let allDataY = []//y轴数据
					let isXfushu = false//x轴是否有小于0的数据
					let isYfushu = false//y轴是否有小于0的数据
					res.data.data.seriesData[0].data.forEach((item, index, arr) => {
						item.value.forEach((it, index1, arr1) => {
							allDataX.push(arr1[0] > 0 ? arr1[0] : -arr1[0])
							allDataY.push(arr1[1] > 0 ? arr1[1] : -arr1[1])
							if (arr1[0] < 0) {
								isXfushu = true
							}
							if (arr1[1] < 0) {
								isYfushu = true
							}
						})
					})
					var Ymax1=Math.ceil(Math.max(...allDataY))
					var Xmax1=Math.ceil(Math.max(...allDataX))
					var Ymin1=Math.ceil(Math.min(...allDataY))
					var Xmin1=Math.ceil(Math.min(...allDataX))
					if(Ymax1<10){
						Ymax1=Math.ceil(Math.max(...allDataY)+1)
					}else{
						Ymax1=Math.ceil(Math.max(...allDataY)+3)
					}
					if(Xmax1<10){
						Xmax1=Math.ceil(Math.max(...allDataX)+1)
					}else{
						Xmax1=Math.ceil(Math.max(...allDataX)+3)
					}
					let yMax = 0//y轴最大的数据
					if (Math.max(...allDataY) % 10 === 0) {
						yMax = (Math.max(...allDataY))
					} else {
						yMax = ((parseInt((Math.max(...allDataY)).toString().substring(0, 1)) + 1))
					}
					let yMin = 0//y轴最小的数据
					let fuyMin = 0//y轴最小值
					if (yMax % 10 === 0) {
						if (isYfushu === true) {
							yMin = 0
							fuyMin = -(yMax)
						} else {
							yMin = yMax / 2
							fuyMin = 0
						}
					} else {
						if (isYfushu === true) {
							yMin = 0
							fuyMin = -(((parseInt(yMax.toString().substring(0, 1)) + 1)))
						} else {
							yMin = ((parseInt(yMax.toString().substring(0, 1)) + 1)) / 2
							fuyMin = 0
						}
					}
					let xMin = 0//x轴最小的数据
					let fuXmin = 0//x轴最小值
					if (Math.max(...allDataX) % 10 === 0) {
						if (isXfushu === true) {
							xMin = 0
							fuXmin = -(Math.max(...allDataX))
						} else {
							xMin = (Math.max(...allDataX)) / 2
							fuXmin = 0
						}
					} else {
						if (isXfushu === true) {
							xMin = 0
							fuXmin = -((parseInt((Math.max(...allDataX)).toString().substring(0, 1)) + 1) )
						} else {
							xMin = ((parseInt((Math.max(...allDataX)).toString().substring(0, 1)) + 1)) / 2
							fuXmin = 0
						}
					}
					this.MarkChartOptionData = {
						seriesData: res.data.data.seriesData[0].data,
						max: yMax,//y最大值
						min: yMin,//y最小值
						y: xMin,//x平均值
						fuXmin: fuXmin,//X轴最小值
						fuyMin: fuyMin,//Y轴最小值
						Ymax1:Ymax1,
						Xmax1:Xmax1,
						Ymin1:Ymin1,
						Xmin1:Xmin1,
						randomColor: ['#F7E303', '#3EE465', '#FF4F4F', '#00EAFF', '#eb68f7', '#F7E303', '#3EE465', '#FF4F4F', '#00EAFF', '#eb68f7'],//颜色设置
						centerLine: [//中心线设置
							{
								name: 'y', xAxis: xMin,//x平均值
							},
							{
								name: 'x', yAxis: yMin,//y最小值
							}
						],
						centerMark: [//中心点设置
							{
								type: 'max', name: '最大值', valueDim: 'x'
							},
							{
								type: 'min', name: '最小值', valueDim: 'x',
							},
						],
						names: ['有竞争力优势并且结构优势较强', '有竞争力优势但是结构优势较差', '无竞争力优势并且结构优势较差', '无竞争力优势但是结构优势较强']
					}
				}
			}).catch(err => {

			})
		},
		//ABCD区
		getCompeteData5(busiCode, dataType){
			getCompeteData2(busiCode, dataType).then(res => {
				if (res.data.code == 200) {
					this.ysData[0].name=res.data.data.list[0].areaName+'城市有较强的竞争力优势但是结构优势较差，应当给予政策倾斜大力发展，进一步加快三次产业及其内部结构优化升级，使产业迈向中高端水平。'
				}
			}).catch(err => {
			})
		},
		getCompeteData6(busiCode, dataType){
			getCompeteData2(busiCode, dataType).then(res => {
				if (res.data.code == 200) {
					this.ysData[1].name=res.data.data.list[0].areaName+'城市经济健康向上发展。有较强的竞争力优势并且结构优势较强，应该持续巩固和发展经济健康向上的好势头，全力培育、壮大优势产业链，推动形成规模化产业集群，打造现代产业体系。'
				}
			}).catch(err => {
			})
		},
		getCompeteData7(busiCode, dataType){
			getCompeteData2(busiCode, dataType).then(res => {
				if (res.data.code == 200) {
					this.ysData[2].name=res.data.data.list[0].areaName+'城市结构优势较强但是无竞争力优势，建议全面提升产业的开放水平和信息化水平，增强现有产业的支撑作用和创新优势，强化产业基础，以此提升城市竞争力。'
				}
			}).catch(err => {
			})
		},
		getCompeteData8(busiCode, dataType){
			getCompeteData2(busiCode, dataType).then(res => {
				if (res.data.code == 200) {
					this.ysData[3].name=res.data.data.list[0].areaName+'城市经济发展质量较差，无竞争力优势并且结构优势较差，需要从优化产业结构和提升城市竞争力两方面增强区域经济发展质量，确保经济可持续稳定发展。'
				}
			}).catch(err => {
			})
		},
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.competitive-edge {
	width: 100%;
	height: 100%;
	//padding: .5vh 1.3vw 1.85vh 1.3vw; 和框架样式冲突
	overflow: hidden;

	.tablist {
		width: 100%;
		height: 8vh;
		display: flex;
		padding: 0 54vh;
		box-sizing: border-box;
		margin-top: 2vh;

		.items {
			flex: 1;
			cursor: pointer;
			transition: all .2s ease;

			img {
				width: 3.5vw;
				// height:7.7vh;
				float: left;
				margin-right: .2vw;
				margin-left: 2vw;
				transition: all .2s ease;
			}

			.imgActive {
                margin-bottom: -2vh;
                //display: block;
                width: 4.5vw;
                height: auto;
                //margin: 0 auto;
            }

			span {
				color: #5DBCFF;
				font-size: 0.98vw;
				line-height: 6.6vh;
				transition: all .2s ease;
			}

			span.active {
				color: #B5E5FD;
				transition: all .2s ease;
			}
		}
	}

	.bar1Box {
		width: 100%;
		height: 85vh;
		float: left;
	}

	.centerBox {
		width: 100%;
		height: 85vh;
		padding: 0 3vh;
		box-sizing: border-box;

		.topBox {
			width: 100%;
			height: 53vh;
			margin-top: -1.3vh;

			.titleBox {
				width: 100%;
				height: 7vh;
				// background: url(../../assets/images/chanyetitle.png);
				background-size: 100% 100%;
				line-height: 7vh;
				text-align: center;
				color: #fff;
				font-weight: bold;
        position: relative;
        .titleCenter{
          width: 60%;
          height:100%;
          position: absolute;
          top:0;
          left: 20%;
          text-align: center;
          background: url(../../assets/images/title_back.png);
          background-size: 100% 100%;
        }
        .titleLeft{
            width:36%;
            height:100%;
            position: absolute;
            left:0;
            top:0;
            background: url('~@/assets/images/标题装饰.png') no-repeat 10px center;
            // background-size: 100%;
            transform:rotateY(180deg)
            //background-repeat: repeat-x;
        }
        .titleRight{
            width:36%;
            height:100%;
            position: absolute;
            right:0;
            top:0;
            background: url('~@/assets/images/标题装饰.png') no-repeat 10px center;
            // background-size: 100%;
            //background-repeat: repeat-x;
        }
			}
		}

		.bottomBox {
			width: 100%;
			height: 30%;
			li {
				list-style: none;
				width: 100%;
				height: 7vh;
				line-height: 7vh;
				// overflow: hidden;
				div {
					width: 4vw ;
					// height:6.3vh;
					float: left;
					// line-height: 6.3vh;
					text-align: center;
					font-size: 0.85vw;
					margin-right: .3vh
				}

				p {
					font-size: 0.7vw;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #00EAFF;
					text-align: left;
					line-height: 3.15vh;
					text-shadow: 0px 1px 6px #00EAFF;
				}
			}

			li:nth-child(1) div {
				color: #F7E303
			}

			li:nth-child(2) div {
				color: #3EE2E4
			}

			li:nth-child(3) div {
				color: #3EE465
			}

			li:nth-child(4) div {
				color: #FF4F4F
			}
		}
	}
}
</style>
